Mindig az első lépés a legfontosabb, aminek semmi köze sincs a webszerkesztéshez: készíts egy képet! Nem feladatom, hogy elmagyarázzam valamelyik képszerkesztő használatát, de nem hiszem, hogy bárkinek problémát okozna a pl. Paint rajzolóprogram használata. Szóval készítsünk egy képet! (Másik módszer, hogy letöltünk a netről, de erre figyeljünk oda, vegyük figyelembe a szerzői jogokat!) Nem mindegy továbbá, hogy milyen formátumban mentjük el. Már volt róla szó, hogy a képeknél csak a GIF, JPG, PNG formátumokat használhatjuk. Az sem másodlagos szempont, hogy mekkora méretű (pixelben és byte-ban!) ez a kép. Mivel internetre dolgozunk, a fizikai (byte-ban mért) méretére ügyeljünk, ne legyen több pár tíz, esetleg 100-200 kbyte-nál. A kép felbontása pedig a monitorunk felbontásától függ, de ne feledjük, nem mindekinek van 1600x1200-as felbontású monitora. Tehát készítettünk egy kisméretű, GIF, JPG vagy PNG formátumú képet, majd mentsük le ugyanabba a mappába, amelyikben a mentett HTML oldalunk található. Most pedig nézzük meg az általános hivatkozás formáját és az attribútumlistát:
<IMG> attribútumleírás
| src | A használandó kép nevét adhatjuk meg, esetlegesen egy relatív elérési úttal. Pl.: src="kepek/pelda.png". Itt már nem ugyanabban a mappában található a kép, mint a HTML dokumentumunk, hanem az abból nyíló kepek mappában. Érdemes különálló mappát készíteni a képeknek, elsősorban az áttekinthetőség miatt. Figyeld meg, hogy nem backslash-t (\) használok az útvonalban, hanem sima perjelet (/). Ez majd a későbbiekben is jellemző lesz, minden útvonalmeghatározásra. Kezdők szokták elrontani: abszolút útvonalat használnak: src="c:\weblapom\kepek\pelda.png". Ez több sebből vérzik: 1) nem használhatok backslash-t, 2) nem használhatok abszolút hivatkozást. Ha jobban belegondolsz a HTML működésébe (kliens/szerver architektúra), rájössz, hogy a böngésző a kliens gépén fogja majd keresni a C: meghajtón a weblapom\kepek mappában a pelda.png-t. Mekkora annak az esélye, hogy mindenkinek (bárkinek) ott lesz ugyanaz a kép, mint a te gépeden? |
|---|---|
| width | A kép szélességét adhatod meg ennek a paraméternek a segítségével. Ha nem írod ki, akkor a kép eredeti szélességét fogja használni. Ebből következik, hogy ez a paraméter kicsinyítésre, vagy nagyításra használható. |
| height | Ugyanaz, mint a width attribútum, csupán a kép magasságára vonatkozik. Ha csak az egyik jellemzőt adod meg, akkor a kép méretarányosan fog változni, de ha mindkettőt alkalmazod, ezt megváltoztathatod. Vigyázz vele, nagyon el lehet rontani egy szép képet! |
| alt | A kép helyett megjelenő szöveg. Ennek egy esetben van szerepe, ha a kép nincs betöltve (lassan jön, nem létezik a szerveren az adott kép), abban az esetben a kép helyett ez a szöveg fog megjelenni. |
Mielőtt látnánk egy példát az <IMG> tag-re, pár igen fontos tudnivaló: bár azt írtam pár sorral ezelőtt, hogy a width és height attribútumok a kép nagyítására és kicsinyítésére szolgálnak, szeretném revizálni, illetve pontosítani ezt a funkciót egy példán keresztül:
| Találtam neten egy szép képet. Jogilag rendben, letölthetem, használhatom. 1680x1050-es a felbontása, a mérete pedig nem olyan nagy, csupán 632 kB-os. Azt szeretném, hogy jelenjen meg egy oldalon kicsiben, alatta (mellette) pedig némi információ a képről. Milyen lehetőségeim vannak? Beszúrom a képet az alábbi, igen egyszerű módon: <IMG src="images/silence.jpg" width="320" height="200"> (Itt megnézheted az eredményt!) Gondoljuk át együtt, mi történik: az <IMG> tag-et látva a böngésző megkeresi az src attribútum értékét, ami az images mappában levő silent.jpg képre mutat. Beolvassa a további jellemzőket, majd látva, hogy a width és a height paraméter is meg van adva, rajzol egy 320x200-as keretet az aktuális pozícióba a böngészünkben, s a háttérben elkezdi ebbe a keretbe beletölteni a képet. Mekkora képet fog letölteni? Pontosan 632 kB-nyi információt! Pedig a 320x200-as kép nem tartalmaz több információt, mint 30-40 kB! Ahhoz, hogy a böngészőprogram kicsiben is meg tudja jeleníteni a képet, bizony, le kell töltenie a teljes 632 kB-ot! Hogyan oldjuk meg ezt a problémát? Egyszerű: fogjuk kedvenc képszerkesztőnket és kicsinyítsük le magunk! Készítsünk egy 320x200-as képet, s arra hivatkozzunk a HTML oldalon. (Feltételezve, hogy szükségünk lesz az eredeti méretre is, az új képet silence_l.jpg néven mentem.) A forráskódom csak a kép nevében változik: <IMG src="images/silence_l.jpg" width="320" height="200"> (Itt megnézheted az eredményt!) |
Gondolkodjunk együtt!
Ha megnézted az előző forráskód eredményét, fekete alapon láthattál egy 320x200-as képet. Minden paraméterét megadtam: a szélességet és a magasságot is. Gondolkodj el azon, milyen indíttatás miatt írtam be ezt a két értéket, pedig a kép maga eredetileg is ilyen méretű volt. Milyen előnyünk származik ha megadom, s milyen, ha nem teszem meg?